<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-12-14 22:13:32
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-21 21:35:47
-->
<template>
  <div>
 <el-row>     
      <!--  solid:边框为实线 ,tree 树形控件，有冒号为变量，@node-click="handleNodeClick为方法  -->   
    <el-col :span="6" style="padding-right:1em;border-right:1px solid #f4f4f4">   
      <el-tree :data="eds" :props="defaultProps" @node-click="handleNodeClick"></el-tree> 
    </el-col> 
   
   <el-col :span="18">  
     <div v-if="params.device_id">
        <el-form inline size="small" :model="params">
          <el-form-item>
             <el-date-picker v-model="params.date" type="month" value-format="yyyy-MM"></el-date-picker>
          </el-form-item>
          <el-form-item>
             <el-button icon="el-icon-search" @click="loadMonitorData">搜索</el-button>
          </el-form-item>
        </el-form>
       
      <el-table :data="monitorData" size="small">
            <el-table-column label="日期" prop="d" width="200" align="center"></el-table-column>
            <el-table-column label="tsp" prop="tsp" width="60" align="center"></el-table-column>
            <el-table-column label="pm10" prop="pm10" width="150" align="center"></el-table-column>
            <el-table-column label="pm2.5" prop="pm25" width="150" align="center"></el-table-column>
            <el-table-column label="温度" prop="temperature" width="150" align="center"></el-table-column>
            <el-table-column label="湿度" prop="humidity"  width="150" align="center"></el-table-column>
            <el-table-column label="风向" prop="wind_direction" align="center"></el-table-column>
          </el-table>  
      
     </div>
     <div v-else style="line-height:3em;color:red;text-align:center">请选择设备</div>
   </el-col>
 </el-row>
  </div>
</template> 

<script>       
import {get} from '@/utils/request'
export default {    
  //变量  
  data() {
    return{
      defaultProps:{
         children: 'children',  
          label: 'name'
      },
     eds:[],
     params:{},
     monitorData:[]
    }
  },
  
  //方法
  methods:{
    //监测月报
    loadMonitorData(){
       //调接口:/monitor/queryMouthData分页多条件查询设备当月数据信息
         let url = "/monitor/queryMouthData"  
         get(url,this.params).then(resp =>{
           this.monitorData = resp.data;
         })
    },
    handleNodeClick(node){
      if(node.engineer_id){          //判断是工程还是设备，有工程id:engineer_id为设备
        //点击了设备
      this.$set(this.params,'engineer_id',node.engineer_id)  //为变量this.params，设置属性engineer_id，值为node.engineer_id
      this.$set(this.params,'device_id',node.id)             //设备id:device_id
     
      //加载该设备上的监测月报数据
      this.loadMonitorData();
     }
   },
   //加载工程设备树
   loadEngineerDevices(){
     let url ="/engineer/findEngineerDeviceTree"
     get(url).then(resp =>{
       this.eds = resp.data;
     })
   }
  },
 
 //页面加载完毕后执行
 mounted(){
  this.loadEngineerDevices();
 },
}
</script>
